<template>
  <div id="app">
    <transition name="side">
      <side-menu v-show="show" @hide="sidehide"></side-menu>
    </transition>

    <router-view></router-view>
  </div>
</template>

<script>
  import SideMenu from './components/SideMenu'
  import bus from './bus.js'
  export default {
    data() {
      return {
        show: false
      }
    },
    components: {
      SideMenu
    },
    mounted() {
      bus.$on('sideShow', this.side)
    },
    methods: {
      side() {
        this.show = !this.show
      },
      sidehide(){
        this.show = false
      }
    }
  }

</script>

<style>
  .side-enter-active ul,
  .side-leave-active ul,
  .side-enter-active,
  .side-leave-active {
    transition: all .3s linear;
  }
  
  .side-enter,
  .side-leave-active {
    opacity: 0;
  }
  .side-enter ul,.side-leave-active ul{
    transform: translateX(-50%);
    opacity: 0;
  }
</style>
